<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app" style="width:500px;margin:100px 100px;padding:10px 10px 10px 10px;
border-style: solid; border-width: 5px 5px 5px 5px;border-color: #E0FFFF">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
             label-position="left">
        <el-form-item label="数据库地址" prop="host">
            <el-input v-model="formData.host" placeholder="请输入单行文本数据库地址" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
        <el-form-item label="端口号" prop="port">
            <el-input v-model="formData.port" placeholder="请输入单行文本端口号" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="user">
            <el-input v-model="formData.user" placeholder="请输入单行文本用户名" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" placeholder="请输入密码" clearable show-password
                      :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="数据库名" prop="database">
            <el-input v-model="formData.database" placeholder="请输入数据库名" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
        <el-form-item label="数据表" prop="table">
            <el-input v-model="formData.table" placeholder="请输入数据表" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="模板" prop="template">
            <el-cascader v-model="formData.template" :options="templateOptions" :props="templateProps"
                         placeholder="请选择下拉选择模板" clearable></el-cascader>
        </el-form-item>
        <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
    <el-descriptions title="错误：" v-if="errorText !== null">
        <el-descriptions-item label="错误信息" ><span v-text="errorText"></span></el-descriptions-item>
    </el-descriptions>
</div>
<script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          errorText:null,
          formData: {
            host:'localhost',
            port:'3306',
            user: 'root',
            password: "123456",
            database: 'xgk2023',
            table: 'users',
            template: ["vue", "api", "server.js"],
          },
          text:'无',
          rules: {
            user: [{
              required: true,
              message: '请输入单行文本用户名',
              trigger: 'blur'
            }],
            password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            }],
            database: [{
              required: true,
              message: '请输入数据库名',
              trigger: 'blur'
            }],
            table: [{
              required: true,
              message: '请输入数据表',
              trigger: 'blur'
            }],
            template: [{
              required: true,
              type: 'array',
              message: '请至少选择一个模板',
              trigger: 'change'
            }],
          },
          templateOptions: [{
            "label": "java",
            "value": "java",
            "id": 100,
            "children": [{
              "label": "entity",
              "value": "entity.java",
              "id": 101
            }]
          }, {
            "label": "vue",
            "value": "vue",
            "id": 102,
            "children": [{
              "label": "api",
              "value": "api",
              "id": 103,
              "children": [{
                "label": "server",
                "value": "server.js",
                "id": 104
              }]
            }, {
              "label": "components",
              "value": "components",
              "id": 106,
              "children": [{
                "label": "Introduce",
                "value": "Introduce.vue",
                "id": 107
              }, {
                "label": "Table",
                "value": "Table.vue",
                "id": 108
              }, {
                "label": "Update",
                "value": "Update.vue",
                "id": 109
              }]
            }, {
              "label": "views",
              "value": "views",
              "id": 110,
              "children": [{
                "label": "Model",
                "value": "Model.vue",
                "id": 111
              }]
            }]
          }],
          templateProps: {
            "multiple": false,
            "label": "label",
            "value": "value",
            "children": "children"
          },
        }
      },
      computed: {},
      watch: {},
      created() {},
      mounted() {},
      methods: {
        submitForm() {
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            let baseURL = '/generatorPlus'
            // TODO 提交表单
            axios.get(baseURL, {
                params:{
                  host:this.formData.host,
                  port:this.formData.port,
                  user:this.formData.user,
                  password:this.formData.password,
                  database:this.formData.database,
                  table:this.formData.table,
                  path:'static/'+this.formData.template.join('/'),
                }
              }).then(response => {
                console.log(response);
                this.errorText = response.data
                if(response.status == 200 ){
                    window.location.href = response.request.responseURL
                    this.errorText = null
                 }
                else if(response.status == 201 ){
                    this.errorText = response.data
                }
              }).catch(function (error) {
              });
          })
        },
        resetForm() {
          this.$refs['elForm'].resetFields()
        },
      }
    })

</script>
</body>
</html>
